<template>
	<view>
		
		<view class="main_bag ">
			<image :src="src" class="imagebag"></image>
			<!-- 搜索 -->
			<view class="home_" :style="{ paddingTop: statusBarHeight+40+  'px'}">
				<view class="home_logo">
					
					
					<view class="search_bag">
							<input class="search_text" type="text" v-model="searchKeyword" placeholder="搜索"></text>
							<view class="search_btn" @click="handleSearch">
								搜索
							</view>
					</view>
					
				</view>
					<view class="gather_more">
						<view class="gather_more_title" >搜索历史</view>
						<view class="gather_more_title" >
							<image :src="del" class="delclass" @click="clearHistory"></image>
						</view>
					
				   </view>
				   <view class="search-history">
				       <!-- 搜索历史 -->
				       <view v-for="(item, index) in searchHistory" :key="index" class="history_item">
				         {{ item }}
				       </view>
					</view>  
				<GoodsList :goods-data="goodsList" />
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import GoodsList from '@/components/goodslist.vue'
	export default {
		 components: {
		    GoodsList
		  },
		data() {
			return {
				del:require("@/static/image/home/shanchu.png"),
				searchKeyword: '', // 当前输入的搜索关键词
				searchHistory: [], // 搜索历史记录数组
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				currentIndex: 0,
				goodsList: [
				  {
				    image: 'https://picsum.photos/300/300?random=1',
				    name: '论滴天髓精装版',
				    desc: '八字命理经典著作，深入解析命理',
				    price: '0'
				  },
				  {
				    image: 'https://picsum.photos/300/300?random=2',
				    name: '八字正宗全集',
				    desc: '传统八字命理权威教材，系统全面',
				    price: '88.00'
				  },
				  {
				    image: 'https://picsum.photos/300/300?random=1',
				    name: '论滴天髓精装版',
				    desc: '八字命理经典著作，深入解析命理',
				    price: '68.00'
				  },
				  {
				    image: 'https://picsum.photos/300/300?random=2',
				    name: '八字正宗全集',
				    desc: '传统八字命理权威教材，系统全面',
				    price: '0'
				  },
				],
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新')
			setTimeout(() => {
				console.log('下拉刷新停止')
				uni.stopPullDownRefresh()
			},1000)
		},
		// 上拉加载
		onReachBottom() {
			console.log('上拉加载')
			setTimeout(() => {
				console.log('上拉加载停止')
				uni.stopPullDownRefresh()
			},1000)
		},
		mounted() { // 组件挂载后初始化历史记录。
		    this.searchHistory = getSearchHistory(); // 获取并显示历史记录。
		},
		methods: {
			 switchTab(index) {
			      this.currentIndex = index
				},
			    handleSearch() {
			      if (this.searchKeyword.trim()) { // 检查是否为空字符串或空格字符串
			        this.saveSearchHistory(this.searchKeyword); // 存储搜索关键词到历史记录中
			        // 这里可以添加其他搜索逻辑，如调用API进行搜索等。
			      } else {
			        uni.showToast({ title: '请输入搜索关键词', icon: 'none' }); // 提示用户输入关键词。
			      }
			      this.searchKeyword = ''; // 清空输入框。
			      this.searchHistory = this.getSearchHistory(); // 重新获取并显示历史记录。
			    },
			 // 清空历史记录
			  clearHistory() {
			   uni.removeStorageSync('searchHistory');
			    this.searchHistory = this.getSearchHistory(); // 重新获取并显示历史记录。
			 },
			 // 存储搜索关键词
			saveSearchHistory(keyword) {
			   let history = uni.getStorageSync('searchHistory') || [];
			   // 避免重复添加相同的关键词
			   if (!history.includes(keyword)) {
			     history.unshift(keyword); // 将新关键词添加到数组的开头
			     uni.setStorageSync('searchHistory', history);
			   }
			 },
			  
			 // 获取搜索历史
			getSearchHistory() {
			   return uni.getStorageSync('searchHistory') || [];
			 }  ,
			   
		}
	}
</script>

<style scoped lang="scss">
	
	.imagebag {
	  width: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 300px;
	  z-index: 1; /* 明确设置基础层级 */
	}
	.delclass{
		display: flex;
		width: 12px;
		height: 15px;
	}
	.home_ {
	  background-color: #ffffff;
	  display: flex;
	  flex-direction: column;
	  .home_logo{
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  position: relative; /* 关键定位属性 */
		  z-index: 2; /* 必须高于.imagebag */
		  margin-left: 15px;
		  margin-right: 15px;
		  .logoimage{
			  display: flex;
			  width: 100px;
			  height: 30px;
		  }
		  .search_bag{
			  border:1px solid  #e34234;
			  background-color: #ffffff;
			  width: 100%;
			  height: 35px;
			  border-radius: 10px;
			  display: flex;
			  flex-direction: row;
			  justify-content: space-between;
			  align-items: center;
			  .search_text{
				  margin-left: 10px;
				  font-size: 10px;
			  }
			  .search_btn{
				  background-color: #e34234;
				  border-radius: 10px;
				  color: #fff;
				  width: 50px;
				  margin-top: 3px;
				  margin-bottom: 3px;
				  margin-right: 3px;
				  display: flex;
				  height:30px;
				  align-items: center;
				  justify-content: center;
				  font-size: 10px;
			  }
		  }
	  }
	 
	}
	
	.container {
	  padding: 20rpx;
	}
	
	.content {
	  margin-top: 30rpx;
	  min-height: 400rpx;
	  border-radius: 16rpx;
	  .course{
		  .courseimage{
			  display: block;
			  width: 100%;
			  height: 200px;
			  border-radius: 3px;
		  }
		  .course_title{
			  display: flex;
			  flex-direction: row;
			  margin-top: 10px;
			  font-size: 12px;
			  .course_title_tag{
				  background-color: #e34234;
				  border-radius: 3px;
				  color: #fff;
				  font-size: 10px;
				  display: flex;
				  padding: 2px 5px;
				  align-items: center;
				  justify-content: center;
				  margin-right: 10px;
			  }
		  }
	  }
	  
	}
	.gather_more{
			  display: flex;
			  flex-direction: row;
			  justify-content: space-between;
			  margin-top: 10px;
			  color: #000;
			  margin-left: 10px;
			  background-blend-mode: multiply;
			  position: relative; /* 关键定位属性 */
			  z-index: 2; /* 必须高于.imagebag */
			  .gather_more_title{
				  font-size: 13px;
				  display: flex;
				  flex-direction: row;
				  margin-right: 10px;		
			  }
	}
	.search-history {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 8px;
	  padding: 4px 0;
	  max-width: 100%;
	  margin-left: 10px;
	  .history-item {
	    white-space: nowrap;
	    padding: 4px 12px;
	    background: #f0f0f0;
	    border-radius: 16px;
	    font-size: 12px;
	    min-width: 60px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    box-sizing: border-box;
	  }
	}
	
	
</style>
